<template>
    <div class="roleContent">
        <el-card>
            <div class="btn">
                <el-button v-for="(item, i) in roles" :key="i" type="primary" :icon="item.icon" circle
                    @click="btnBox(item.type)"></el-button>
            </div>
            <div class="list">
                <el-table ref="singleTable" :data="tableData" highlight-current-row
                    @current-change="handleCurrentChange" style="width: 100%">
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column property="roleName" label="名称">
                    </el-table-column>
                    <el-table-column property="createName" label="创建人">
                    </el-table-column>
                    <el-table-column property="createTime" label="创建时间">
                    </el-table-column>
                    <el-table-column property="updateName" label="更新人">
                    </el-table-column>
                    <el-table-column property="updateTime" label="更新时间">
                    </el-table-column>
                    <el-table-column property="isStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.isStatus | getTagStatus">
                                {{ scope.row.isStatus == 1 ? "禁用" : "启用" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <addRoles @show="isShow = false" :roleInfo="roleInfo" :isShow="isShow" @refreshBox="getRoleList"></addRoles>
    </div>
</template>

<script>
import { getRoleList,delRoles } from "../../api/sysApi";
import addRoles from "../../components/sys/addRoles.vue";

export default {
    data() {
        return {
            roles: [
                { type: "add", icon: "el-icon-plus" },
                { type: "update", icon: "el-icon-edit-outline" },
                { type: "del", icon: "el-icon-minus" },
            ],
            tableData: [],
            currentRow: null,
            roleInfo: null,
            isShow: false,
            
        };
    },
    components: {
        addRoles,
    },

    created() {
        // this.list  =  this.list.map(i=>i.setData={isChecked:false,showAgree:false})
        this.getRoleList();
    },

    methods: {
        btnBox(t) {
            switch (t) {
                case "add":
                    this.isShow = true;
                    this.roleInfo = null;
                    return;
                case "update":
                    if (this.currentRow != null) {
                        this.isShow = true;
                        this.roleInfo = JSON.parse(
                            JSON.stringify(this.currentRow)
                        );
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
                case "del":
                    if (this.currentRow.id == undefined) {
                        this.$message({
                            type: "info",
                            message: "按钮不可删除",
                        });
                        return;
                    }
                    if (this.currentRow != null) {
                        this.$confirm(
                            "此操作将永久删除该数据, 是否继续?",
                            "提示",
                            {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            }
                        )
                            .then(() => {
                                const loading = this.$loading({
                                    lock: true,
                                    text: "Loading",
                                    spinner: "el-icon-loading",
                                    background: "rgba(0, 0, 0, 0.7)",
                                });
                                delRoles(this.currentRow.id).then((res) => {
                                    loading.close();
                                    console.log("del", res);
                                    this.$message({
                                        type: "success",
                                        message: "删除成功!",
                                    });
                                });
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "已取消删除",
                                });
                            });
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
            }
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        getRoleList() {
            getRoleList().then((res) => {
                this.tableData = res.data.list;
            });
        },
    },
    computed: {},
    filters: {
        getTagStatus(n) {
            if (n == 0) return "success";
            else return "danger";
        },
    },
};
</script>

<style lang="scss" scope>
.roleContent {
    text-align: left;
    margin: 20px 0;
    flex: 1;

    .el-card {
        height: 100%;
    }
}
</style>